<html>
	<head>
		<script src="<?=base_url()?>assets/js/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" href="<?=base_url()?>assets/css/proposal_category_base.css" type="text/css" media="screen,print" title="" charset="utf-8">
		<link rel="stylesheet" href="<?=base_url()?>assets/css/tab-view.css" type="text/css" media="screen,print" title="" charset="utf-8">
		<script src="<?=base_url()?>assets/js/tab-view.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
var GLOBAL_msg = null;
function ajaxFunction()
	{
		var ajaxRequest;  // The variable that makes Ajax possible!
		try
			{
				// Opera 8.0+, Firefox, Safari
				ajaxRequest = new XMLHttpRequest();
			} 
		catch (e)
			{
				// Internet Explorer Browsers
				try
					{
						ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
					} 
				catch (e) 
					{
						try
							{
								ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
							} 
						catch (e)
							{
								// Bhenji Khabhi Chrome bhi use kiya karo
								alert("Bhenji Khabhi Chrome bhi use kiya karo!");
								return false;
							}
					}
			}
		// Create a function that will receive data sent from the server
		ajaxRequest.onreadystatechange = function()
			{
				if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200)
					{
						document.getElementById("Dynamic_content").innerHTML = ajaxRequest.responseText;
					}
			}
		/*
		var age = document.getElementById('age').value;
		var wpm = document.getElementById('wpm').value;
		var sex = document.getElementById('sex').value;
		var queryString = "?age=" + age + "&wpm=" + wpm + "&sex=" + sex;
		*/
		ajaxRequest.open("GET", "tab_view", true);
		ajaxRequest.send(null);						
	}	
				
document.onclick=function(e)
{
	var node = e.srcElement == undefined ? e.target : e.srcElement;
	if (node.nodeName == "LI" || node.nodeName == "li" || node.nodeName == "SPAN" || node.nodeName == "span") 
		{
			ajaxFunction()
			var list_tree = document.getElementById('list_tree');
			list_tree.style.display = "inline";
			/*
			var id = node.getAttribute("id");
			id = id + node.nodeName;
			document.getElementById("DisplayInfo").innerHTML = ajaxRequest.responseText;
			*/
		}
}
document.onmouseover=function(e)
{
	var node = e.srcElement == undefined ? e.target : e.srcElement;
		if (node.nodeName == "LI" || node.nodeName == "li") 
			{
				node.style.fontWeight= "bold";
				showRollover(e, node.innerHTML);
			}
}
document.onmouseout=function(e)
{	
	var node = e.srcElement == undefined ? e.target : e.srcElement;
		if (node.nodeName == "LI" || node.nodeName == "li") 
			{
				node.style.fontWeight = "normal";
				clearRollover(e);
			}
}
function showRollover(e, msg) 
	{
		if (!e) 
			{ 
				e = window.event;
			}
		if (GLOBAL_msg == null) 
			{
				GLOBAL_msg = msg;
			}
		var clientX = e.clientX + 15;
		var clientY = e.clientY + 10;
		var rollover = document.getElementById('Rollover');
		rollover.innerHTML = GLOBAL_msg;
		rollover.style.marginTop = clientY + "px";
		rollover.style.marginLeft = clientX + "px";
		rollover.style.display = "inline";
		document.onmousemove = showRollover;
	}
function clearRollover(e) 
	{
		if (!e) 
			{ 
				e = window.event;
			}
		var rollover = document.getElementById('Rollover');
		rollover.style.display = "none";
		GLOBAL_msg = null;
		document.onmousemove = null;
	}	
</script>
	</head>

	<body>

		<div class='row-fluid'>
					
			<div id="Dynamic_content" class='span9'>
				<div id="DisplayInfo">Front page message show in the start of the page as seen on load. Message changes on click on the tree menu.</div>
			</div>
	
		<div class='span3' id="list_tree">	
		<?php echo($none);?>
		
		<div id="Rollover"></div>									
		</div>
		
		</div>
		
	</body>
	
</html>